<template>
<!-- 子系统 弹出菜单 -->
  <div class="centerLeft2" ref="centerLeft2">
    
      <!-- 图标区域 -->
      <div id="chart-box">
        <div class="items">
          <dv-border-box-12>
            <!-- icon -->
            <div class="c-top">
              <svg t="1603350356361" class="icon" viewBox="0 0 1024 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20085" width="16" height="16"><path d="M501.808 523.164h385.36c9.65 0 17.473 7.823 17.473 17.473v0.02C904.368 772.322 716.493 960 484.821 960 252.96 960 65 772.028 65 540.152c0-231.687 187.667-419.575 419.315-419.848 9.65-0.012 17.481 7.802 17.493 17.451v385.409zM99.945 540.152c0 212.575 172.315 384.901 384.876 384.901 206.525 0 375.085-162.688 384.465-366.942H466.863V155.66c-204.24 9.381-366.918 177.952-366.918 384.49zM560.107 64C781.514 64 961 243.497 961 464.919c0 9.65-7.823 17.473-17.473 17.473H542.635V81.472c0-9.65 7.823-17.472 17.472-17.472z m15.473 35.357v348.088h348.066C914.799 259.23 763.784 108.204 575.58 99.357z" p-id="20086" fill="#ffffff"></path></svg>
            </div>
            <!-- 文字 -->
            <div class="c-bottom" style="color:white">
              <span>人流统计</span>
            </div>
          </dv-border-box-12>
        </div>

        <div class="items" @click="toSmartPark">
          <dv-border-box-12>
            <div class="c-top">
              <svg t="1603336015420" class="icon" viewBox="0 0 1024 2048">
              <path  fill="white" d="M116.9 846.9c0 15.2 12.5 27.7 27.7 27.7h69.8c15.2 0 27.7-12.5 27.7-27.7v-27.8H116.9v27.8z m408.2 0c0 15.2 12.5 27.7 27.8 27.7h68.9c15.2 0 27.8-12.5 27.8-27.7v-27.8H524.2v27.8h0.9z m-222-375.1c-5.4-5.4-14.3-5.4-19.7 0L217.1 538c-5.4 5.4-5.4 14.3 0 19.7 5.4 5.4 14.3 5.4 19.7 0l66.2-66.2c5.5-5.4 5.5-14.3 0.1-19.7z m47.4 31.3l-42.1 42.1c-5.4 5.4-5.4 14.3 0 19.7 5.4 5.4 14.3 5.4 19.7 0l42.1-42.1c5.4-5.4 5.4-14.3 0-19.7-5.3-5.3-14.3-5.3-19.7 0z m0 0" ></path>
              <path  fill="white" d="M118.7 791.4h531.7c30.4 0 55.5-25.1 55.5-55.5V630.2c0-26-17-46.5-41.2-53.7l-80.6-165.6c-7.2-14.3-21.5-23.3-37.6-23.3h-325c-16.1 0-30.4 9-37.6 23.3l-80.6 165.6c-24.2 7.2-41.2 28.6-41.2 53.7V735c0.2 31.3 25.2 56.4 56.6 56.4z m227.4-136.1l-39.4 68c-3.6 7.2-12.5 9-18.8 5.4-6.3-3.6-9-12.5-5.4-18.8l39.4-68c3.6-6.3 12.5-9 18.8-5.4 7.1 3.6 8.9 12.5 5.4 18.8z m69.8 0l-39.4 68c-3.6 7.2-12.5 9-18.8 5.4-6.3-3.6-9-12.5-5.4-18.8l39.4-68c3.6-6.3 12.5-9 18.8-5.4 6.3 3.6 9 12.5 5.4 18.8z m69.8 0l-39.4 68c-3.6 7.2-12.5 9-18.8 5.4-6.3-3.6-9-12.5-5.4-18.8l39.4-68c3.6-6.3 12.5-9 18.8-5.4 6.3 3.6 9 12.5 5.4 18.8z m101.2 83.3c-30.4 0-55.5-25.1-55.5-55.5s25.1-55.5 55.5-55.5 55.5 25.1 55.5 55.5-25.1 55.5-55.5 55.5zM208.2 423.5c2.7-4.5 7.2-8.1 12.5-8.1h325.8c5.4 0 10.7 2.7 12.5 8.1l73.4 151.3H135.7l72.5-151.3z m-26.9 203.2c30.4 0 55.5 25.1 55.5 55.5s-25.1 55.5-55.5 55.5-56.4-24.2-56.4-54.6c0-30.5 25.1-56.4 56.4-56.4z m0 0" ></path>
              <path  fill="white" d="M153.6 683.1c0 15.3 12.4 27.8 27.7 27.8 15.3 0 27.8-12.4 27.8-27.8 0-15.3-12.4-27.7-27.8-27.7-15.3-0.1-27.7 12.3-27.7 27.7z m0 0M559.1 683.1c0 15.3 12.4 27.8 27.8 27.8 15.3 0 27.7-12.4 27.7-27.8 0-15.3-12.4-27.7-27.7-27.7-15.4-0.1-27.8 12.3-27.8 27.7z m0 0" ></path>
              <path  fill="white" d="M800.8 225.6c0-17.9-13.4-26.9-33.1-26.9-8.1 0-13.4 0.9-17 1.8v53.7c3.6 0.9 9 1.8 15.2 1.8 21.5-0.8 34.9-11.6 34.9-30.4z m0 0" ></path>
              <path  fill="white" d="M943.1 383.2c8.1 0 14.3-6.3 14.3-14.3V138.8c0-8.1-6.3-14.3-14.3-14.3H607.4c-8.1 0-14.3 6.3-14.3 14.3v230.1c0 8.1 6.3 14.3 14.3 14.3h154v492.3H76.6c-8.1 0-14.3 6.3-14.3 14.3 0 8.1 6.3 14.3 14.3 14.3H944c8.1 0 14.3-6.3 14.3-14.3 0-8.1-6.3-14.3-14.3-14.3H789.2V383.2h153.9zM750.7 268.6v55.5h-17.9V186.2c9-1.8 19.7-2.7 34-2.7 35.8 0 51 17.9 51 40.3 0 30.4-23.3 44.8-52.8 44.8-5.4 0.9-9.9 0.9-14.3 0z m0 0" p-id="4572"></path>
              </svg>
            </div >
            <div class="c-bottom" style="color:white">
              <span>智慧停车</span>
              <!-- <router-link to="/smartPark" style="font-size:0.2rem; color:white">智慧停车</router-link> -->
            </div>
          </dv-border-box-12>
        </div>

        <div class="items">
          <dv-border-box-12>
            <div class="c-top">
              <svg t="1603351267912" class="icon" viewBox="0 0 1024 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23843" width="16" height="16"><path d="M233.44 286.41a80.21 80.21 0 1 1 80.2-80.21 80.3 80.3 0 0 1-80.2 80.21z m0-110.42a30.21 30.21 0 1 0 30.2 30.21 30.25 30.25 0 0 0-30.2-30.2z m66.61 428.14H157.37a36.4 36.4 0 0 1-36.3-34.4L92.65 338.56V337A36.39 36.39 0 0 1 129 300.68h208.87A36.39 36.39 0 0 1 374.22 337v2L336.3 570.37a36.39 36.39 0 0 1-36.25 33.76z m-130.52-50H288.3l33.35-203.45H144.52z" p-id="23844" fill="#ffffff"></path><path d="M261.44 828.4h-56a37.05 37.05 0 0 1-37-36.24L157.21 556.4h152.45l-11.22 235.76a37.05 37.05 0 0 1-37 36.24z m-43.6-50H249l8.19-172h-47.54z m276.72 161.15a25 25 0 0 1-25-25V116.47a25 25 0 1 1 50 0v798.08a25 25 0 0 1-25 25z m268.76-653.14a80.21 80.21 0 1 1 80.21-80.21 80.3 80.3 0 0 1-80.21 80.21z m0-110.42a30.21 30.21 0 1 0 30.21 30.21 30.25 30.25 0 0 0-30.21-30.2z m25.05 646.23h-50.1c-19.74 0-34.77-12.38-35.69-29.05l-11.34-125.64H835.4l-11.35 125.64c-0.91 16.67-15.95 29.05-35.68 29.05z m-37.48-50h24.85l4.94-54.69H746z" p-id="23845" fill="#ffffff"></path><path d="M876 711.34H650.64c-20.4 0-37-16.09-37-35.88v-2.16l60.11-345c1.48-18.48 17.46-33.08 36.89-33.08H816c19.43 0 35.41 14.6 36.89 33.08l60.11 345v2.16c0 19.79-16.61 35.88-37 35.88z m-209.51-50h193.67l-55.08-316.12h-83.52z" p-id="23846" fill="#ffffff"></path></svg>
            </div >
            <div class="c-bottom" style="color:white">
              <span>智慧厕所</span>
            </div>
          </dv-border-box-12>
        </div>

        <div class="items">
          <dv-border-box-12>
            <div class="c-top">
              <svg t="1603349818511" class="icon" viewBox="0 0 1024 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10913" width="16" height="16"><path d="M740.267 473.6c-12.8 0-21.334-8.533-21.334-21.333V371.2c0-27.733-25.6-51.2-55.466-51.2S608 343.467 608 371.2v81.067c0 12.8-8.533 21.333-21.333 21.333s-21.334-8.533-21.334-21.333V371.2c0-51.2 44.8-93.867 98.134-93.867S761.6 320 761.6 371.2v81.067c0 12.8-8.533 21.333-21.333 21.333zM247.467 256c-10.667 0-19.2-6.4-21.334-17.067-2.133-10.666 4.267-23.466 14.934-25.6l531.2-128c10.666-2.133 23.466 4.267 25.6 14.934 2.133 10.666-4.267 23.466-14.934 25.6l-531.2 128c0 2.133-2.133 2.133-4.266 2.133z" fill="#ffffff" p-id="10914"></path><path d="M347.733 930.133c-12.8 0-21.333-8.533-21.333-21.333V142.933c0-12.8 8.533-21.333 21.333-21.333s21.334 8.533 21.334 21.333V908.8c0 12.8-8.534 21.333-21.334 21.333z" fill="#ffffff" p-id="10915"></path><path d="M426.667 938.667H262.4c-12.8 0-21.333-8.534-21.333-21.334S249.6 896 262.4 896h164.267c12.8 0 21.333 8.533 21.333 21.333s-10.667 21.334-21.333 21.334z m236.8-616.534c-12.8 0-21.334-8.533-21.334-21.333V142.933c0-12.8 8.534-21.333 21.334-21.333s21.333 8.533 21.333 21.333V300.8c0 12.8-8.533 21.333-21.333 21.333z m76.8 151.467h-153.6c-12.8 0-21.334-8.533-21.334-21.333s8.534-21.334 21.334-21.334h153.6c12.8 0 21.333 8.534 21.333 21.334s-8.533 21.333-21.333 21.333z" fill="#ffffff" p-id="10916"></path></svg>
            </div >
            <div class="c-bottom" style="color:white">
              <span>智慧路灯</span>
            </div>
          </dv-border-box-12>
        </div>

        <div class="items">
          <dv-border-box-12>
            <div class="c-top">
              <svg t="1603349978257" class="icon" viewBox="0 0 1024 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12849" width="16" height="16"><path d="M960 613.4v80h-40v-80c0-55.1-10.8-108.5-32-158.8-20.5-48.6-50-92.2-87.5-129.7s-81.1-66.9-129.7-87.5c-50.3-21.3-103.7-32-158.8-32s-108.5 10.8-158.8 32c-48.6 20.5-92.2 50-129.7 87.5S156.6 406 136 454.6c-21.3 50.3-32 103.7-32 158.8v80H64v-80c0-247.4 200.6-448 448-448s448 200.6 448 448zM492 273.6h40v-60h-40v60z m-276.9 71.2l42.4 42.4 28.3-28.3-42.4-42.4-28.3 28.3z m-103 288.6h60v-40h-60v40z m739.8-40v40h60v-40h-60zM738.2 359l28.3 28.3 42.4-42.4-28.3-28.3-42.4 42.4zM514.3 688.6c-11 0-20 9-20 20s9 20 20 20 20-9 20-20-9-20-20-20m0-40c33.1 0 60 26.9 60 60s-26.9 60-60 60-60-26.9-60-60 26.9-60 60-60z m-71.4-78.1l54.2 154.2 32.7 13.3 7.9-34.3-94.8-133.2M311.3 316.7l269.4 378.4-22.4 97.6-93-37.8-154-438.2zM792 818.6H232v40h560v-40z" fill="#ffffff" p-id="12850"></path></svg>
            </div >
            <div class="c-bottom" style="color:white">
              <span>能耗检测</span>
            </div>
          </dv-border-box-12>
        </div>

        <div class="items">
          <dv-border-box-12>
            <div class="c-top">
              <svg t="1603350032759" class="icon" viewBox="0 0 1024 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13292" width="16" height="16"><path d="M465.066667 743.04a21.333333 21.333333 0 0 1-13.226667-4.693333A21.333333 21.333333 0 0 1 448 708.266667l85.333333-106.666667h-108.373333a21.333333 21.333333 0 0 1-19.413333-11.946667 21.333333 21.333333 0 0 1 2.56-22.613333L523.733333 426.666667a21.333333 21.333333 0 0 1 33.28 26.88l-85.333333 106.666666h108.586667a21.333333 21.333333 0 0 1 19.2 12.16 21.333333 21.333333 0 0 1-2.56 22.613334l-114.346667 141.866666a21.333333 21.333333 0 0 1-17.493333 6.186667z" p-id="13293" fill="#ffffff"></path><path d="M740.266667 839.893333H283.52V508.8A234.666667 234.666667 0 0 1 512 269.866667a234.666667 234.666667 0 0 1 228.266667 238.933333z m-414.08-42.666666H697.6V508.8a192 192 0 0 0-185.6-196.266667 192 192 0 0 0-185.813333 196.266667zM512 219.093333a21.333333 21.333333 0 0 1-21.333333-21.333333V149.333333a21.333333 21.333333 0 0 1 42.666666 0v48.426667a21.333333 21.333333 0 0 1-21.333333 21.333333zM723.2 293.333333a21.333333 21.333333 0 0 1-13.866667-5.333333 21.333333 21.333333 0 0 1-2.346666-30.08l30.72-35.626667a21.333333 21.333333 0 0 1 32.426666 27.946667l-30.72 35.626667a21.333333 21.333333 0 0 1-16.213333 7.466666zM303.146667 292.48a21.333333 21.333333 0 0 1-15.573334-6.826667L256 251.733333a21.333333 21.333333 0 0 1 0-30.08 21.333333 21.333333 0 0 1 30.293333 0L318.506667 256a21.333333 21.333333 0 0 1 0 30.08 21.333333 21.333333 0 0 1-15.36 6.4zM234.666667 473.6H188.16a21.333333 21.333333 0 0 1 0-42.666667H234.666667a21.333333 21.333333 0 0 1 0 42.666667zM830.506667 473.6h-45.653334a21.333333 21.333333 0 0 1 0-42.666667h45.653334a21.333333 21.333333 0 0 1 0 42.666667z" p-id="13294" fill="#ffffff"></path><path d="M822.826667 841.6H201.173333a21.333333 21.333333 0 0 1 0-42.666667h621.653334a21.333333 21.333333 0 1 1 0 42.666667z" p-id="13295" fill="#ffffff"></path></svg>
            </div >
            <div class="c-bottom" style="color:white">
              <span>集中告警</span>
            </div>
          </dv-border-box-12>
        </div>

        <div class="items">
          <dv-border-box-12>
            <div class="c-top">
              <svg t="1603350128677" class="icon" viewBox="0 0 1024 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15209" width="16" height="16"><path d="M320 352H64v480h256V352z m-64 416H128V416h128v352zM640 64H384v768h256V64z m-64 704H448V128h128v640zM64 896h896v64H64z m640-64h256V224H704v608z m64-544h128v480H768V288z" fill="#ffffff" p-id="15210"></path></svg>
            </div >
            <div class="c-bottom" style="color:white">
              <span>商业分析</span>
            </div>
          </dv-border-box-12>
        </div>

        <div class="items">
          <dv-border-box-12>
            <div class="c-top">
              <svg t="1603350216304" class="icon" viewBox="0 0 1024 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17496" width="16" height="16"><path d="M94.584211 345.446363v167.849818c0 12.590241 35.252332 38.611909 106.589579 57.909262 80.566192 22.667251 190.508468 35.248892 309.688289 35.248892 119.178101 0 229.118656-12.58164 309.695169-35.248892 71.338968-19.297353 106.587859-45.319021 106.58786-57.909262v-167.849818c-83.929209 48.671716-239.197386 73.852199-416.283029 73.8522-177.087363 0.00172-332.348659-25.180483-416.277868-73.8522z m-71.337248-90.643201c0-103.226563 216.530135-164.495401 487.615116-164.495402s487.623717 61.268839 487.623717 164.495402v516.158615c0 103.226563-216.538736 164.497121-487.623717 164.497122-271.084981 0-487.615116-61.270559-487.615116-164.497122V254.803162z m903.899865 349.139661c-83.929209 48.678597-239.197386 73.85392-416.283029 73.85392-177.087363 0-332.348659-26.013066-416.277868-73.85392v167.849817c0 12.590241 35.252332 38.610189 106.589579 57.917864 80.566192 22.65865 190.508468 35.248892 309.688289 35.248891 119.178101 0 229.118656-12.590241 309.69517-35.248891 71.338968-19.307675 106.587859-45.327622 106.587859-57.917864v-167.849817zM510.863799 348.8025c119.178101 0 229.118656-12.588521 309.69517-35.248892 71.338968-19.305954 106.587859-45.319021 106.587859-57.909262 0-12.588521-35.248892-38.611909-106.587859-57.909262-80.576513-22.65865-190.517069-35.248892-309.69517-35.248892-119.179821 0-229.122097 12.590241-309.688289 35.248892-71.337247 19.297353-106.58958 45.319021-106.589579 57.909262 0 12.590241 35.252332 38.603308 106.589579 57.909262 80.566192 21.815746 190.506747 35.248892 309.688289 35.248892z m-274.441117 167.858418c-26.019947-3.363017-45.319021-19.305954-45.319021-38.611909s26.013066-29.374363 52.033014-26.011346c26.014786 3.354416 45.320741 19.297353 45.32074 38.603308 0.00172 19.304234-26.021667 29.372643-52.034733 26.019947z m0 258.493019c-26.019947-3.361297-45.319021-19.305954-45.319021-38.611909 0-19.297353 26.013066-29.374363 52.033014-26.009625 26.014786 3.352696 45.320741 19.297353 45.32074 38.601587-3.354416 19.305954-26.021667 28.534899-52.034733 26.019947z m0 0" p-id="17497" fill="#ffffff"></path></svg>
            </div >
            <div class="c-bottom" style="color:white">
              <span>资产管理</span>
            </div>
          </dv-border-box-12>
        </div>

        <div class="items">
          <dv-border-box-12>
            <div class="c-top">
              <svg t="1603350284448" class="icon" viewBox="0 0 1024 2048" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18338" width="16" height="16"><path d="M512 1024c-154.983784 0-442.810811-228.601081-442.810811-444.748108V148.895135l44.004325-0.83027a651.208649 651.208649 0 0 0 200.648648-41.513514 917.974486 917.974486 0 0 0 171.589189-88.008648l26.291892-18.542703 26.568649 18.542703a926.858378 926.858378 0 0 0 171.865946 88.008648 648.468757 648.468757 0 0 0 200.648648 41.513514l43.727568 0.83027 0.276757 430.356757C954.810811 795.398919 666.707027 1024 512 1024zM124.540541 221.405405v359.783784c0 167.161081 284.782703 387.459459 387.459459 387.45946s387.459459-220.298378 387.459459-387.45946V221.405405c-43.727568-4.704865-149.171892-6.088649-223.065945-35.148108C600.838919 156.644324 543.273514 102.123243 512 83.027027c-31.273514 19.096216-88.838919 73.617297-164.393514 103.23027a734.678486 734.678486 0 0 1-189.024864 45.111352z m363.658378 519.74919L300.281081 586.724324l57.842162-65.868108 120.389189 99.078919 229.154595-254.339459 67.528649 56.735135z m0 0" p-id="18339" fill="#ffffff"></path></svg>
            </div >
            <div class="c-bottom" style="color:white">
              <span>智慧安防</span>
            </div>
          </dv-border-box-12>
        </div>
      </div>  

      <!-- 文字区域 -->
      <div id="text-box" class="d-flex jc-center">
          <div class="items">
            <dv-border-box-7>
              <div class="text">
              <i class="el-icon-setting" style="margin-right:0.1rem;font-size:0.25rem"></i>
              <span>维修管理</span>
              </div>
            </dv-border-box-7>
          </div>
          <div class="items">
            <dv-border-box-7>
              <div class="text">
              <i class="el-icon-cpu" style="margin-right:0.075rem;font-size:0.25rem"></i>
              <span>设备管理</span>
              </div>
            </dv-border-box-7>
          </div>
          <div class="items">
            <dv-border-box-7>
              <div class="text">
              <i class="el-icon-delete" style="margin-right:0.075rem;font-size:0.25rem"></i>
              <span>智慧消防</span>
              </div>
            </dv-border-box-7>
          </div>
          <div class="items">
            <dv-border-box-7>
              <div class="text">
              <i class="el-icon-s-opportunity" style="margin-right:0.075rem;font-size:0.25rem"></i>
              <span>亮化照明</span>
              </div>
            </dv-border-box-7>
          </div>
          <div class="items">
            <dv-border-box-7>
              <div class="text">
              <i class="el-icon-s-promotion" style="margin-right:0.075rem;font-size:0.25rem"></i>
              <span>信息发布</span>
              </div>
            </dv-border-box-7>
          </div>
          <div class="items">
            <dv-border-box-7>
              <div class="text">
              <i class="el-icon-menu" style="margin-right:0.075rem;font-size:0.25rem"></i>
              <span>数据信息</span>
              </div>
            </dv-border-box-7>
          </div>
      </div>  
    </div>
</template>

<script>
// import centreLeft2Chart from "@/components/echart/centerLeft2/centreLeft2Chart";
export default {
  data() {
    return {};
  },
  components: {
    // centreLeft2Chart
  },
  computed:{
    isShow(){
      return this.$store.state.childIsShow
    }
  },
  watch:{
    isShow(){
      classie.toggle( this.$refs.centerLeft2, 'child-open')
    }
  },
  methods: {
    // 智慧停车模块
    toSmartPark(){
      this.$store.commit('showPark',1)
      classie.toggle( this.$refs.centerLeft2, 'child-open') 
    }
  }
};
</script>

<style lang="less" scoped>
.centerLeft2 {
  // padding: 0.2rem;
  width: 7rem;
  height: 15rem;
  // min-width: 3.75rem;
  position: fixed;
  top: -15rem;
  box-shadow: inset 1px 1px 20px rgb(64,158,255);
  background-color: rgba(64,158,255, 0.3);
  // border: 1px solid greenyellow;
  
  .items{
    &:hover{
       background-color: rgb(4, 69, 107) !important;
       cursor: pointer;
    }
  }
  .icon{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%);
  }
  // 图标区域
  #chart-box{
    width: 100%;
    height: 6rem;
    display: grid;
    grid-template-columns: repeat(3,30%);
    grid-template-rows: repeat(3,30%);
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    align-content: center;
    justify-content: center;
    // 图标
    .c-top{
      width: 100%;
      height: 65%;
      position: relative;
      font-size: 0.5rem;
      text-align: center;
      //  z-index: 0;
    }
    // 文字
    .c-bottom{
      width: 100%;
      height: 35%;
      font-size: 0.225rem;
      text-align: center;
      // z-index: 1;
    }
  }
  // 文字区域
  #text-box{
    width: 100%;
    height:2rem;
    display: grid;
    grid-template-columns: repeat(3,30%);
    grid-template-rows: repeat(3,28%);
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    align-content: center;
    justify-content: center;

    .text {
      font-size: 0.2rem;
      color: #c3cbde;
      position: absolute;
      white-space: nowrap; // 强制span不换行
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);   
  }
    
  }
}
.centerLeft2.child-open{
  top: 0.1rem;
  transition: 0.1s;
}
</style>